<template>
  <div id="userDetail">
      <div class="images">
          <img :src="userData.profile.avatarUrl" alt="" class="avatar">
      </div>
   
   <h3>{{userData.name}}</h3>
   <h4>等级：lv.{{userData.level}}</h4>
   <h5>已经听过的歌曲数量：{{userData.listenSongs}}</h5>
   
  </div>
</template>

<script>

export default {
  name: 'userDetail',
  data () {
    return {
     userData:{}
    }
  },
created() {
    this.userData = JSON.parse(localStorage.userData)
    this.userData.name = localStorage.name
    console.log(this.userData);
},
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.images{
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin: 0 auto;
    /* border-radius: 50%; */
    margin-bottom: 20px;
}
.images img{
    width: 100%;
}
h3,h5{
    margin: 10px 0;
}
</style>
